<template>
  <el-drawer destroy-on-close size="800" v-model="弹窗否" :show-close="false" :before-close="详情.关窗">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg">{{ !单项.id ? '新增ing' : '编辑ing' }}</span>
        <div>
          <el-button type="primary" @click="详情.保存">确 定</el-button>
          <el-button @click="详情.关窗">取 消</el-button>
        </div>
        <!-- 单项:{{ 单项 }} -->
      </div>
    </template>
    <el-form :model="单项" label-position="top" ref="formRef" :rules="rule" label-width="80px">
      <div class="flex">
        <el-form-item label="名称:" prop="名称" class="flex-1">
          <el-input v-model="单项.名称" :clearable="true" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="类别:" prop="类别" class="flex-1">
          <el-select v-model="单项.类别id" placeholder="请选择类别" style="width:100%" :clearable="true">
            <el-option v-for="(item, key) in list.插组件.a.候选值集.类别id" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格:" prop="价格" class="flex-1">
          <el-input v-model.number="单项.价格" :clearable="true" placeholder="请输入价格" />
        </el-form-item>
      </div>
      <el-form-item label="图片:" prop="图片组">
        <SelectImage multiple v-model="单项.图片组" file-type="image" />
      </el-form-item>
      <el-form-item label="关键词:" prop="关键词">
        <ArrayCtrl v-model="单项.关键词" editable />
      </el-form-item>
      <el-form-item>
        <a子表2 v-model="单项.属性" ref="子表ref2" 标题="属性"></a子表2>
      </el-form-item>

      <el-form-item label="可选配置:" prop="可选配置">
        <!-- <a数组 v-model="单项.可选配置" :选项组="设置.单项树.商品可选配置" /> -->
      </el-form-item>
      <el-form-item>
        <a子表 :父组件="详情" ref="子表ref" 标题="skus"></a子表>
      </el-form-item>

      <el-form-item label="详情:" prop="详情">
        <RichEdit v-model="单项.详情" />
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

const props = defineProps({
  list: Object,
})
import a子表 from './子表.vue';
const 子表ref = ref()

import a子表2 from './子表2.vue';
const 子表ref2 = ref()
// console.log(`子表ref 👉`,子表ref)

// console.log(`props 👉`, props)
import a数组 from '@/components/a数组.vue'
import ArrayCtrl from '@/components/arrayCtrl/arrayCtrl.vue'
import SelectImage from '@/components/selectImage/selectImage.vue'
import RichEdit from '@/components/richtext/rich-edit.vue'

import { 予图片路径, 图片元素加后台, 图片元素减后台 } from '@/utils'

function 展示前处理(单项) {
  // console.log(`单项.详情 👉`, 单项.详情)
  单项.详情 = 图片元素加后台(单项.详情)
}
function 保存前处理(单项) {
  单项.详情 = 图片元素减后台(单项.详情)
}

import use详情_抽屉式 from '@/hooks/use详情_抽屉式';
const 详情 = use详情_抽屉式({ list: props.list, 子表ref, 展示前处理, 保存前处理 })
// const 详情 = use详情_抽屉式()
const { 弹窗否, 单项, 初始化, formRef, rule, a } = 详情
console.log(`单项 👉`, 单项)
defineExpose({ 初始化 })


</script>

<style></style>
